<script setup>
import { ref } from 'vue'
import axios from 'axios'
import {myAxios1,myAxios2,myAxios3} from '../utils/tools'

let msg = ref('Hello h1')
// 未封装 形式
// axios.get('/api/get-string').then(res=> {
//     console.log(res)
//   }
// )
// axios.post('/api/post-string', {name: 'hello'}).then(res=> {
//     console.log(res)
// })

// 封装【1】
// console.log("hello",myAxios1('/api/get-string', { params: { "name": "hello" } }));

// 封装【1】
// myAxios1('/api/get-string', { params: { "name": "hello" } }).then(res => {
//   msg.value = res
// })

// 封装【2】
// myAxios2('/get-string', { params: { "name": "hello2" } }).then(res => {
//   msg.value = res.data
// })

// 封装【2】
// myAxios2({url:'/get-string',method:'get',params:{ "name": "hello3" }}).then(res => {
//   msg.value = res.data
// })

// 封装【3】 get
// myAxios3('/api/get-string').then(res => {
//   console.log(res)
//   msg.value = res
// })

// 封装【3】 post
myAxios3('/api/post-string',{
  method:'post',
  data:{name:'hello3 - post'}
}).then(res => {
  console.log(res)
  msg.value = res
}).catch(err => {
  console.log(err)
})
</script>

<template>
  <h1>{{ msg }}</h1>

</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
